<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托案例</title>
</head>
<body>
    <div>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
        <button>按钮6</button>
        <button>按钮7</button>
        <button>按钮8</button>
        <button>按钮9</button>
        <button>按钮10</button>
    </div>
    <script>
        var div=document.querySelector('div');
        div.onclick=function(e){
    //利用冒泡机制给父元素绑定一个点击事件
    // 鼠标点击按钮的时候能够触发父元素的点击事件
    for(var i=1;i<=10;i++){
        // 利用for循环给让按钮的位数成为一个变量
        if( e.target.innerHTML==='按钮'+i){
        // e.target 鼠标的正真点击的元素
        // 动态监听点击事件之后添加进来的标签页可以显示事件处理
        var newBtn=e.target.cloneNode(true);
        // 克隆元素
        this.appendChild(newBtn);
    }
    }
  
        }
    </script>
    
</body>
</html>